<template>
	<!-- 确定是否弹窗模块 -->
	<view class="cs-tip">
		<view class="cs-tip-item">
			<view class="cs-tip-item-content">{{msg}}</view>
			<view class="cs-tip-item-confirm">
				<view class="btb-no" @click='changeProp(false)'>取消</view>
				<view class="btn-yes" @click='changeProp(true)'>确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			msg: String
		},
		methods: {
			// 将取消/确定的状态给父组件
			changeProp(isConfirm) {
				this.$emit('changeProp', isConfirm)
			}
		}
	}
</script>

<style lang="scss">
	.cs-tip{
		position: fixed;
		left:0;right:0;top:0;bottom:0;
		z-index: 2;
		background: rgba(0, 0, 0, 0.4);
		.cs-tip-item {
			position: absolute;
			left:0;right:0;top:0;bottom:0;
			width: 422upx;
			height: 200upx;
			margin: auto;
			padding: 40upx;
			border-radius: 20upx;
			background: #FFFFFF;
			.cs-tip-item-content{
				text-align: center;
				font-size: 34upx;
				color: #333333;
			}
			.cs-tip-item-confirm{
				position: absolute;
				display: flex;
				bottom: 0; left: 0; right: 0;
				margin-bottom: 20upx;
				justify-content: space-around;
				.btb-no{
					font-size: 34upx;
					color: #999999;
				}
				.btn-yes{
					font-size:34upx;
					color: #00D5A2;
				}
			}
		}
	}
</style>
